<template>
  <div class="wrapper">
    <div class="center_echars" ref="echars">
      <canvas></canvas>
    </div>
  </div>
</template>

<script>
import { seriesConfig,legendList } from "./config.js";
import { mapGetters } from "vuex";
import customed from '../../../assets/common/customed'
import { mapMutations } from "vuex";
export default {
  props: {
    title: String,
    data: Object
  },
  data() {
    return {
      echarsData: {
        title: {
          text: "",
          left: "left",
          padding: [0,0,0,25],
          textStyle: {
            color: "#fff",
            fontWeight: 600,
            fontSize:22,
            lineHeight: 40
          }
        },
        //鼠标移动上去显示
        tooltip: {
          trigger: "axis",
           formatter: function(param){
             return "产能目标："+param[0].data+"<br />"+"产能完成："+param[1].data+"<br />"+"产能达成率："+param[2].data+"%<br />"+"产能差异："+param[3].data
           },
          axisPointer: {
            type: "shadow",
            crossStyle: {
              color: "#999"
            }
          }
        },

        legend: {
          data: [],
          top: '5%',
          right: '3%',
          textStyle: {
            color: "#fff"
          }
        },
        xAxis: {
          type: "category",
          data: [],
          axisLabel: {
            textStyle: {
              color: "#fff" //更改坐标轴文字颜色
            }
          }
        },
        yAxis: [
          {
            axisLabel: {
              textStyle: {
                color: "#fff" //更改坐标轴文字颜色
              }
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)"
              }
            }
          },
          {
            type: 'value',
            scale: true,
            max: 100,
            min: 0,
            axisLabel: {
              textStyle: {
                color: "#fff" //更改坐标轴文字颜色
              },
              formatter: '{value}%'
            },
          }
        ],
        //柱条和折现设置
        series: [
          {
            //产能目标
            type: "bar",
            name: '',
            data: [],
            label:{
              show: true,
              position: "top",
              textStyle: {
                  color: "#fff"
              },
            },
            itemStyle: {   
              normal:{  
                    color: '#4876ff'
              }
            },
          },
          {
            //产能完成
            type: "bar",
            name: '',
            data: [],
            itemStyle: {   
              normal:{  
                    color: '#66cd00'
              }
            },
          },
          {
            //产能达成率
            type: "line",
            name: '',
            data:[],
            symbolSize: 8,
            yAxisIndex: 1,
            itemStyle: {   
              normal:{  
                    color: '#66cd00'
              }
            },
          },
          {
            //产能差异
            type: "bar",
            name: '',
            data: [],
            itemStyle: {   
              normal:{  
                color: '#ffb90f'
              }
            },
          }
        ],
       
        grid: {
          top: "26%", //柱状图距离父容器div顶端的距离
          x: 20,
          x2: 20,
          y: 10,
          y2: 20,
          containLabel: true //grid 区域是否包含坐标轴的刻度标签
        }
      },
      myChart: {}
    };
  },
  mounted() {
    this.initConfig();
    this.init();
    this.lastLoading(true);
  },
  computed: {
    ...mapGetters(["resize"])
  },
  watch: {
    resize(val) {
      this.againRender();
    },
    data:{
      deep: true,
      handler: function(val){
        console.log(val);
        let seriesList = this.echarsData.series;
        this.echarsData.series[0].data = val.target
        this.echarsData.series[1].data = val.complete
        this.echarsData.series[2].data = val.achievement
        this.echarsData.series[3].data = val.difference
        this.echarsData.xAxis.data = val.name
        this.initConfig();
        this.init();

        setTimeout(() => {
          console.log(this.myChart);
          this.myChart.resize();
          this.lastLoading(false);

        },2000)
      }
    }
  },
  methods: {
    initConfig() {
      //增加配置 柱形图文字和线条配置
      // this.echarsData.series[0].label = seriesConfig;
      this.echarsData.series[1].label = seriesConfig;
      this.echarsData.series[3].label = seriesConfig;
      let legendArray = this.echarsData.legend.data;
      let seriesList = this.echarsData.series;  
      //图例文字
      legendList.map((item,index) => {
        let name = `${this.title}${item}`
        legendArray.push(name);
        seriesList[index].name = name
      })
      
    },
    init() {
      this.echarsData.title.text = this.title
      const echars = this.$refs.echars;
      this.myChart = this.$echarts.init(echars);

      this.myChart.setOption(this.echarsData,customed);
    },
    againRender() {
      let dom = this.$refs.echars;
      this.myChart.resize();
    },
     ...mapMutations({
      lastLoading: "LAST_LOADING"
    })
  },
  beforeDestroy(){
    // this.myChart = null;
    this.echarsData = null;
  }
};
</script>

<style lang="less" scoped>
.wrapper {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.2);
  width: 50vw;
  height: 40vh;
  .center_echars {
    width: 100%;
    height: 100%;
  }
}
</style>